
import React, { FC, useEffect, useState } from 'react'
import http from '../../api/request'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
const CenterRightOne: FC = () => {
  const [data, setOneData] = useState([])
  const { t } = useTranslation()
  const navigate = useNavigate()
  const goTodetail = (item: any): void => {
    navigate('/detail', { state: item })
  }
  useEffect(() => {
    void http.get('/wipi/api/article/recommend').then((res) => {
      setOneData(res.data)
      // console.log(res.data)
    })
  }, [])
  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-unused-vars
  const times = (t: any) => {
    const day = new Date().getTime() - new Date(t).getTime()
    return Math.floor(day / 3600 / 1000 / 24)
  }
  return (
    <div>
        <h4>{t('recommend')}</h4>
         {
            data.map((item: any, index: number) => {
              return <li key={index} onClick={() => goTodetail(item)}>
              {item.title} <span>{times(item.createAt)}天后</span>
            </li>
            })
         }
    </div>
  )
}

export default CenterRightOne
